<template>
    <ContentWrap>
        <CardTitle title="Icon 使用" />
        <code class="code-block mt-20px" >
            &lt;Icon icon="ep:user" /&gt;<br/>
            &lt;Icon icon="ep:setting" :size="20" color="#409EFF" /&gt;<br/>
            &lt;Icon icon="ep:delete" :size="24" color="#F56C6C" /&gt;
        </code>
        <CardTitle title="Icon 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
// 无需特殊配置，直接使用即可
&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="Icon 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>icon</td> 
                    <td>String</td>
                    <td>-</td>
                    <td>图标名称</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>Number</td>
                    <td>16</td>
                    <td>图标大小</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>String</td>
                    <td>-</td>
                    <td>图标颜色</td>
                </tr>
            </tbody>
        </table>
        <CardTitle title="Icon 示例" />
       <div class="mt-20px icon-examples">
        <div class="icon-item">
            <Icon icon="ep:user" />
            <span>用户图标</span>
        </div>
        <div class="icon-item">
            <Icon icon="ep:setting" :size="20" color="#409EFF" />
            <span>设置图标</span>
        </div>
        <div class="icon-item">
            <Icon icon="ep:delete" :size="24" color="#F56C6C" />
            <span>删除图标</span>
        </div>
        <div class="icon-item">
            <Icon icon="ep:edit" :size="18" color="#67C23A" />
            <span>编辑图标</span>
        </div>
        <div class="icon-item">
            <Icon icon="ep:search" :size="16" color="#E6A23C" />
            <span>搜索图标</span>
        </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
// 无需特殊配置，直接使用即可
</script>

<style lang="scss" scoped>
.icon-examples {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;

    .icon-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #f9f9f9;
        
        span {
            font-size: 14px;
            color: #666;
        }
    }
}
</style> 